<!DOCTYPE html>
<head>
<script src="../../../resources/js-test.js"></script>
<style>
  div { width: 100px }
  div:-webkit-any(.outer) { width: 200px }
  div:-webkit-any(.inner) { width: 300px }
  div:-webkit-any(.inner2) { width: 150px }
</style>
</head>
<body>
<div id="outer">
  <div id="mid">
    <div id="inner">
    </div>
  </div>
</div>

<script>
description("Tests that a style recalc on the inner element after the outer one works correctly. See also crbug.com/346928.");

function insertStyleSheet(css)
{
    var styleElement = document.createElement("style");
    styleElement.textContent = css;
    (document.head || document.documentElement).appendChild(styleElement);
}

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

outer.offsetHeight;

outer.className = 'outer';
inner.className = 'inner';

shouldBe("getComputedStyle(outer).width", '"200px"');

inner.className = 'inner2';
shouldBe("getComputedStyle(inner).width", '"150px"');

</script>

</body>
